<template>
  <div class="login">
    <div class="position-box">
      <h1
        class="login-title-h1"
        v-text="loginTitle"
      />
      <el-card class="login-card">
        <div slot="header"><span class="login-card-title">欢迎回来</span></div>
        <el-form
          class="login-form"
          :model="loginForm"
          :rules="rules"
          status-icon
          ref="loginForm"
        >
          <el-form-item prop="username">
            <el-input
              class="login-user-input"
              v-model="loginForm.username"
              auto-complete="off"
              placeholder="用户名/电话/邮箱"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="login-user-input"
              type="password"
              v-model="loginForm.password"
              auto-complete="off"
              @keydown.enter.native="login('loginForm')"
              placeholder="用户密码"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              @click="login('loginForm')"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  name: "Login",
  data() {
    return {
      loginTitle: this.$com.Other._title.loginTitle,
      loginForm: {
        username: null,
        password: null
      },
      rules: {
        username: this.$com.Validate.username,
        password: this.$com.Validate.password
      }
    };
  },
  created() {
    console.log(this.$com.Other._title.loginTitle)
    // console.log(this.$com.Validate.username);
  },
  methods: {
    login(loginForm) {
      this.$refs[loginForm].validate(valid => {
        if (valid) {
          const params = {
            manager: 1,
            username: this.loginForm.username,
            password: this.loginForm.password
          };
          this.$api.USER.login(params)
            .then(res => {
              const data = res.data;
              // console.log("data: ", data);
              const userRolse = this.userRoles(data.manager);
              const token = {
                userId: data.rid,
                userRole: userRolse,
                personName: data.person_name,
                manager: userRolse
              };
              // console.log("token: ", token);
              sessionStorage.setItem("token", JSON.stringify(token));
              this.$com.Other.token = JSON.parse(
                sessionStorage.getItem("token")
              );
              const userId = parseInt(data.permissonid);
              if (userId === 7) {
                // 管理员跳转页面
                this.$router.replace("/monitoringData");
              } else {
                // 普通跳转页面
                this.$router.replace("/monitoringData");
              }
            })
            .catch(err => {
              console.log("err :", err);
              Message({
                showClose: true,
                type: "error",
                message: err.data.msg,
                duration: 1000
              });
            });
        } else {
          return false;
        }
      });
    },
    // 配置用户权限标识
    userRoles(data) {
      const userId = data.split(",");
      const userRole = [];
      for (let i = 0; i < userId.length; i++) {
        if (parseInt(userId[i]) === 1) {
          // 管理员权限标识
          const obj = "admin";
          userRole.push(obj);
        } else {
          // 普通权限标识
          const obj = "user" + userId[i];
          userRole.push(obj);
        }
      }
      // console.log("用户权限 :", userRole);
      return userRole;
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  height: 100%;
  background: #409eff url("../../assets/img/login_bg.jpg") no-repeat;
  background-size: cover;
  // background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  // background-size: 400% 400%;
  // animation: Gradient 15s ease infinite;
  .position-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .login-title-h1 {
    margin: 8% auto 3% auto;
    font-size: 3em;
    text-align: center;
    color: #fff;
  }
  .login-card {
    width: 320px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    border-color: rgba(0, 166, 255, 0.66);
    background: rgba(0, 0, 0, 0.45);
    /deep/ .el-card__header {
      border-color: rgba(0, 166, 255, 0.66);
    }
    .login-card-title {
      font-size: 16px;
      font-weight: 600;
    }
    .login-form {
      .login-user-input {
        /deep/ .el-input__inner {
          color: #fff;
          border-color: rgba(0, 166, 255, 0.66);
          background: rgba(255, 255, 255, 0.338);
        }
      }
      .login-btn {
        width: 100%;
      }
    }
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
